<template>
  <div class="box">
    <div class="item1">
      <div class="flex">
        <template>
          <div class="block">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </template>
        <common-item1
          :query="query"
          :streetList="streetList"
          :communityList="communityList"
          :villageList="villageList"
          :show="false"
          @visibleChangeStreet="visibleChangeStreet"
          @changeStreet="changeStreet"
          @visibleChangeCommunity="visibleChangeCommunity"
          @changeCommunity="changeCommunity"
          @visibleChangeVillage="visibleChangeVillage"
          @changeVillage="changeVillage"
        />
      </div>
      <div class="flex">
        <a href="javascript:void(0)" class="btn">
          导入城管收运数据
          <input type="file" @change="uploadFile" id="file" />
        </a>

        <a
          href=""
          @click.prevent="handleExport1"
          class="btn"
          style="margin-left: 10px;"
        >
          导出城管缺失收运数据
          <input type="button" id="button" />
        </a>

        <a
          href=""
          @click.prevent="handleExport2"
          class="btn"
          style="margin-left: 10px;"
        >
          导出邦凝缺失收运数据
          <input type="button" id="button" />
        </a>
      </div>
    </div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
    <div class="item5"></div>
  </div>
</template>
<script>
import NProgress from "nprogress";
import { commonItem1 } from "../../common/commonItem1/common-item1.js";
export default {
  data() {
    return {
      query: {
        streetId: "",
        communityId: "",
        villageId: "",
        streetName: "",
        communityName: "",
        villageName: "",
      },
      streetList: [],
      communityList: [],
      villageList: [],
      // 默认选中昨天
      value1: new Date(
        new Date(new Date().toLocaleDateString()).getTime() -
          24 * 60 * 60 * 1000
      ),
    };
  },
  components: {
    "common-item1": () => import("../../common/commonItem1/common-item1.vue"),
  },
  methods: {
    // 导入城管收运数据
    uploadFile(e) {
      NProgress.start();
      var event = e || window.event;
      var target = event.target || e.srcElement;

      var input = document.querySelector("#file");
      var file = input.files[0];

      var formdata = new FormData();
      formdata.append("file", file);
      this.fileName = file.name;
      this.$axios
        .post("/village/citycollection/import", formdata, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            // 解决input file上传同一个文件时onChange事件只触发一次问题
            target.value = null;
            NProgress.done();
            return this.$message.error(res.msg);
          }
          this.$message.success("导入成功");
          target.value = null;
          NProgress.done();
        })
        .catch((err) => {});
    },
    // 导出城管缺失收运数据
    handleExport1() {
      if (this.query.villageId === "") {
        return this.$message.warning({
          message: "请选择查询的小区",
          duration: 1500,
        });
      }
      this.export(
        "/village/citycollection/exportCityMiss",
        {
          villageId: this.query.villageId,
          startDate: this.value1.getTime(),
          endDate: this.value1.getTime() + 24 * 60 * 60 * 1000 - 1,
        },
        "城管缺失收运数据"
      );
    },
    // 导出邦凝缺失收运数据
    handleExport2() {
      if (this.query.villageId === "") {
        return this.$message.warning({
          message: "请选择查询的小区",
          duration: 1500,
        });
      }
      this.export(
        "/village/citycollection/exportSangdeMIss",
        {
          villageId: this.query.villageId,
          startDate: this.value1.getTime(),
          endDate: this.value1.getTime() + 24 * 60 * 60 * 1000 - 1,
        },
        "邦凝缺失收运数据"
      );
    },
    export(url, params, typeName = " ") {
      NProgress.start();
      this.$axios
        .get(url, {
          params: {
            ...params,
          },
          responseType: "blob",
        })
        .then((res) => {
          console.log(res);
          if (res.data.size === 0) {
            NProgress.done();
            return this.$message.warning({
              message: "数据为空",
              duration: 1500,
            });
          }
          const link = document.createElement("a");
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);

          link.setAttribute(
            "download",
            `${
              this.query.villageName
            }_${this.value1.getFullYear()}_${this.value1.getMonth() +
              1}_${this.value1.getDate()}_${typeName}.xls`
          );

          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          NProgress.done();
        })
        .catch((err) => {});
    },
    ...commonItem1,
  },
};
</script>
<style lang="scss">
.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.box {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #666;
  display: grid;
  grid-auto-flow: row;
  div {
    &.item1 {
      border-bottom: 1px solid #666;
      // display: flex;
      // flex-direction: row;
      // justify-content: flex-start;
      height: 100%;

      box-sizing: border-box;
      padding: 10px;
      .block {
        margin-right: 10px;
      }
      .btn {
        position: relative;
        display: inline-block;
        text-align: center;
        color: #fff;
        text-decoration: none;
        width: auto;
        height: 32px;
        line-height: 32px;
        background: #409eff;
        border-radius: 3px;
        font-size: 12px;
        vertical-align: middle;
        padding: 0 10px;
        // margin-left: 10px;
        input[type="file"] {
          opacity: 0;
          width: 100%;
          height: 100%;
          border-radius: 3px;
          position: absolute;
          left: 0;
        }
        input[type="button"] {
          opacity: 0;
          width: 100%;
          height: 100%;
          border-radius: 3px;
          position: absolute;
          left: 0;
        }
      }
    }

    &.item2,
    &.item3,
    &.item4 {
      height: 100%;
      border-bottom: 1px solid #666;
    }
  }
}
</style>
